<template>
  <div id="parent">
    <h1>图片检测</h1>
    <div id="detection">
      <label class="custom-file-upload" for="file" v-show="!showSign">
        <div class="icon">
          <svg xmlns="http://www.w3.org/2000/svg" fill="" viewBox="0 0 24 24">
            <g stroke-width="0" id="SVGRepo_bgCarrier"></g>
            <g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g>
            <g id="SVGRepo_iconCarrier">
              <path fill=""
                    d="M10 1C9.73478 1 9.48043 1.10536 9.29289 1.29289L3.29289 7.29289C3.10536 7.48043 3 7.73478 3 8V20C3 21.6569 4.34315 23 6 23H7C7.55228 23 8 22.5523 8 22C8 21.4477 7.55228 21 7 21H6C5.44772 21 5 20.5523 5 20V9H10C10.5523 9 11 8.55228 11 8V3H18C18.5523 3 19 3.44772 19 4V9C19 9.55228 19.4477 10 20 10C20.5523 10 21 9.55228 21 9V4C21 2.34315 19.6569 1 18 1H10ZM9 7H6.41421L9 4.41421V7ZM14 15.5C14 14.1193 15.1193 13 16.5 13C17.8807 13 19 14.1193 19 15.5V16V17H20C21.1046 17 22 17.8954 22 19C22 20.1046 21.1046 21 20 21H13C11.8954 21 11 20.1046 11 19C11 17.8954 11.8954 17 13 17H14V16V15.5ZM16.5 11C14.142 11 12.2076 12.8136 12.0156 15.122C10.2825 15.5606 9 17.1305 9 19C9 21.2091 10.7909 23 13 23H20C22.2091 23 24 21.2091 24 19C24 17.1305 22.7175 15.5606 20.9844 15.122C20.7924 12.8136 18.858 11 16.5 11Z"
                    clip-rule="evenodd" fill-rule="evenodd"></path>
            </g>
          </svg>
        </div>
        <div class="text">
          <span>上传照片</span>
        </div>
        <input type="file" id="file" @change="onFileChange">
      </label>
      <div v-if="showSign" class="imageBorder">
        <img :src="imageUrl" style="width: auto; max-height: 600px;">
      </div>
      <label>
        <button class="button" @click="submitToPredict">
          <span class="transition"></span>
          <span class="gradient"></span>
          <span class="label">提交检测</span>
        </button>
      </label>
      <br>
      <label>
        <button class="button" @click="changeImage">
          <span class="transition"></span>
          <span class="gradient"></span>
          <span class="label">切换图片</span>
        </button>
      </label>
    </div>
  </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import {message} from 'ant-design-vue';
import axios from "axios";

let file = null;
let imageUrl = ref('');
let showSign = ref(false);
let lastUploadedFile = null;
let lastUploadResult = null;
let submitTimes = 0;

function onFileChange(event) {
  file = event.target.files[0];
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = () => {
    imageUrl.value = reader.result;
    showSign.value = true;
  };
}

//提交图片来进行预测
function submitToPredict() {
  if (!file) {
    message.warning('图片未上传');
    return;
  }
  //如果用户提交相同图片
  if (file === lastUploadedFile && submitTimes > 5) {
    message.warning('请勿重复提交相同图片');
    submitTimes++;
    return;
  }else if(file === lastUploadedFile && lastUploadResult && submitTimes <= 5){
    submitTimes++;
    if (lastUploadResult.code === 200) {
      if (lastUploadResult.msg == 'real') {
        message.success('图片为真');
      } else {
        message.error('图片为假');
      }
    } else {
      message.error(response.data.msg)
    }
    return;
  }
  var formData = new FormData;
  formData.append('file', file)
  formData.append('userId', localStorage.getItem("userId"))
  axios.post('/api/predict', formData)
      .then(response => {
        console.log(response.data);
        if (response.data.code === 200) {
          if (response.data.msg == 'real') {
            message.success('图片为真');
          } else {
            message.error('图片为假');
          }
        } else {
          message.error(response.data.msg)
        }
        submitTimes = 1;
        lastUploadResult = response.data
        lastUploadedFile = file;
      })
      .catch(error => {
        console.log(error)
      })
}

//切换图片
function changeImage() {
  file = null
  imageUrl.value = ''
  showSign.value = false
}
</script>


<style scoped>
#parent {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 800px;
}

#detection {
  /* 水平垂直居中 */

}

.custom-file-upload {
  height: 400px;
  width: 400px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border: 2px dashed #cacaca;
  background-color: rgba(255, 255, 255, 1);
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0px 48px 35px -48px rgba(0, 0, 0, 0.1);
}

.custom-file-upload .icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-file-upload .icon svg {
  height: 80px;
  fill: rgba(75, 85, 99, 1);
}

.custom-file-upload .text {
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-file-upload .text span {
  font-weight: 400;
  color: rgba(75, 85, 99, 1);
}

.custom-file-upload input {
  display: none;
}

button {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
  "Liberation Mono", "Courier New", monospace;
  font-size: 15px;
  padding: 1em 2.7em;
  font-weight: 500;
  background: #1f2937;
  color: white;
  border: none;
  position: relative;
  overflow: hidden;
  border-radius: 0.6em;
  cursor: pointer;
  margin-top: 20px;
}

.gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 0.6em;
  margin-top: -0.25em;
  background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.3)
  );
}

.label {
  position: relative;
  top: -1px;
}

.transition {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  transition-duration: 500ms;
  background-color: rgba(16, 185, 129, 0.6);
  border-radius: 9999px;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

button:hover .transition {
  width: 14em;
  height: 14em;
}

button:active {
  transform: scale(0.97);
}

/*-------------------------*/
.imageBorder {
  border: 2px dashed #cacaca;
}
</style>
